<template>
  <div class="butterfly-background">
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const canvasRef = ref(null)
let ctx = null
let animationFrame = null
let butterflies = []
let flowers = []

class Flower {
  constructor(canvas) {
    this.x = Math.random() * canvas.width
    this.y = canvas.height * 0.6 + Math.random() * canvas.height * 0.4
    this.size = Math.random() * 20 + 15
    this.rotation = Math.random() * Math.PI * 2
    this.sway = Math.random() * Math.PI * 2
    this.swaySpeed = Math.random() * 0.02 + 0.01
    
    const colors = [
      { r: 255, g: 100, b: 150 },
      { r: 255, g: 150, b: 100 },
      { r: 150, g: 100, b: 255 },
      { r: 100, g: 200, b: 255 },
      { r: 255, g: 200, b: 100 }
    ]
    this.color = colors[Math.floor(Math.random() * colors.length)]
  }

  update() {
    this.sway += this.swaySpeed
  }

  draw(ctx) {
    ctx.save()
    ctx.translate(this.x, this.y)
    ctx.rotate(Math.sin(this.sway) * 0.1)
    
    // 绘制花茎
    ctx.strokeStyle = 'rgba(100, 180, 100, 0.3)'
    ctx.lineWidth = 2
    ctx.beginPath()
    ctx.moveTo(0, 0)
    ctx.lineTo(0, 30)
    ctx.stroke()

    // 绘制花瓣
    ctx.rotate(this.rotation)
    for (let i = 0; i < 6; i++) {
      ctx.save()
      ctx.rotate((Math.PI * 2 * i) / 6)
      
      const gradient = ctx.createRadialGradient(0, 0, 0, 0, -this.size * 0.3, this.size * 0.5)
      gradient.addColorStop(0, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0.4)`)
      gradient.addColorStop(1, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0.1)`)
      
      ctx.fillStyle = gradient
      ctx.beginPath()
      ctx.ellipse(0, -this.size * 0.3, this.size * 0.3, this.size * 0.5, 0, 0, Math.PI * 2)
      ctx.fill()
      
      ctx.restore()
    }

    // 绘制花心
    const centerGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, this.size * 0.15)
    centerGradient.addColorStop(0, 'rgba(255, 255, 150, 0.6)')
    centerGradient.addColorStop(1, 'rgba(255, 220, 100, 0.3)')
    ctx.fillStyle = centerGradient
    ctx.beginPath()
    ctx.arc(0, 0, this.size * 0.15, 0, Math.PI * 2)
    ctx.fill()

    ctx.restore()
  }
}

class Butterfly {
  constructor(canvas) {
    this.canvas = canvas
    this.reset()
  }

  reset() {
    this.x = Math.random() * this.canvas.width
    this.y = Math.random() * this.canvas.height * 0.7
    this.size = Math.random() * 20 + 15
    this.speed = Math.random() * 2 + 1
    this.angle = Math.random() * Math.PI * 2
    this.wingAngle = 0
    this.wingSpeed = 0.2
    this.wobble = Math.random() * Math.PI * 2
    this.wobbleSpeed = 0.05
    
    // 随机选择蝴蝶颜色
    const patterns = [
      { primary: { r: 255, g: 150, b: 0 }, secondary: { r: 255, g: 200, b: 100 } },
      { primary: { r: 100, g: 150, b: 255 }, secondary: { r: 200, g: 220, b: 255 } },
      { primary: { r: 255, g: 100, b: 150 }, secondary: { r: 255, g: 200, b: 220 } },
      { primary: { r: 150, g: 100, b: 255 }, secondary: { r: 220, g: 200, b: 255 } },
      { primary: { r: 255, g: 255, b: 100 }, secondary: { r: 255, g: 255, b: 200 } }
    ]
    this.pattern = patterns[Math.floor(Math.random() * patterns.length)]
  }

  update() {
    this.wobble += this.wobbleSpeed
    this.angle += (Math.random() - 0.5) * 0.1
    
    this.x += Math.cos(this.angle) * this.speed
    this.y += Math.sin(this.angle) * this.speed + Math.sin(this.wobble) * 0.5
    
    this.wingAngle += this.wingSpeed
    if (Math.abs(Math.sin(this.wingAngle)) < 0.1) {
      this.wingSpeed = -this.wingSpeed
    }

    // 边界检查
    if (this.x < -50 || this.x > this.canvas.width + 50 || 
        this.y < -50 || this.y > this.canvas.height + 50) {
      this.reset()
    }
  }

  draw(ctx) {
    ctx.save()
    ctx.translate(this.x, this.y)
    ctx.rotate(this.angle)

    const wingFlap = Math.sin(this.wingAngle) * 0.5

    // 绘制左翅膀
    this.drawWing(ctx, -1, wingFlap)
    
    // 绘制右翅膀
    this.drawWing(ctx, 1, wingFlap)

    // 绘制身体
    ctx.fillStyle = `rgba(50, 50, 50, 0.8)`
    ctx.beginPath()
    ctx.ellipse(0, 0, this.size * 0.1, this.size * 0.4, 0, 0, Math.PI * 2)
    ctx.fill()

    // 绘制头部
    ctx.beginPath()
    ctx.arc(0, -this.size * 0.3, this.size * 0.12, 0, Math.PI * 2)
    ctx.fill()

    // 绘制触角
    ctx.strokeStyle = `rgba(50, 50, 50, 0.6)`
    ctx.lineWidth = 1
    ctx.beginPath()
    ctx.moveTo(-this.size * 0.05, -this.size * 0.35)
    ctx.quadraticCurveTo(-this.size * 0.1, -this.size * 0.5, -this.size * 0.08, -this.size * 0.55)
    ctx.stroke()
    ctx.beginPath()
    ctx.moveTo(this.size * 0.05, -this.size * 0.35)
    ctx.quadraticCurveTo(this.size * 0.1, -this.size * 0.5, this.size * 0.08, -this.size * 0.55)
    ctx.stroke()

    ctx.restore()
  }

  drawWing(ctx, side, flap) {
    ctx.save()
    ctx.scale(side, 1)
    ctx.rotate(flap * 0.5)

    // 上翅膀
    const upperGradient = ctx.createRadialGradient(
      this.size * 0.3, -this.size * 0.2, 0,
      this.size * 0.3, -this.size * 0.2, this.size * 0.5
    )
    upperGradient.addColorStop(0, `rgba(${this.pattern.primary.r}, ${this.pattern.primary.g}, ${this.pattern.primary.b}, 0.9)`)
    upperGradient.addColorStop(0.5, `rgba(${this.pattern.secondary.r}, ${this.pattern.secondary.g}, ${this.pattern.secondary.b}, 0.7)`)
    upperGradient.addColorStop(1, `rgba(${this.pattern.primary.r}, ${this.pattern.primary.g}, ${this.pattern.primary.b}, 0.5)`)

    ctx.fillStyle = upperGradient
    ctx.strokeStyle = `rgba(0, 0, 0, 0.3)`
    ctx.lineWidth = 1
    ctx.beginPath()
    ctx.ellipse(this.size * 0.4, -this.size * 0.2, this.size * 0.5, this.size * 0.4, 0, 0, Math.PI * 2)
    ctx.fill()
    ctx.stroke()

    // 翅膀花纹
    ctx.fillStyle = `rgba(${this.pattern.secondary.r}, ${this.pattern.secondary.g}, ${this.pattern.secondary.b}, 0.6)`
    ctx.beginPath()
    ctx.arc(this.size * 0.35, -this.size * 0.25, this.size * 0.1, 0, Math.PI * 2)
    ctx.fill()

    // 下翅膀
    const lowerGradient = ctx.createRadialGradient(
      this.size * 0.25, this.size * 0.1, 0,
      this.size * 0.25, this.size * 0.1, this.size * 0.4
    )
    lowerGradient.addColorStop(0, `rgba(${this.pattern.primary.r}, ${this.pattern.primary.g}, ${this.pattern.primary.b}, 0.85)`)
    lowerGradient.addColorStop(0.5, `rgba(${this.pattern.secondary.r}, ${this.pattern.secondary.g}, ${this.pattern.secondary.b}, 0.65)`)
    lowerGradient.addColorStop(1, `rgba(${this.pattern.primary.r}, ${this.pattern.primary.g}, ${this.pattern.primary.b}, 0.45)`)

    ctx.fillStyle = lowerGradient
    ctx.beginPath()
    ctx.ellipse(this.size * 0.3, this.size * 0.15, this.size * 0.35, this.size * 0.3, 0, 0, Math.PI * 2)
    ctx.fill()
    ctx.stroke()

    ctx.restore()
  }
}

const init = () => {
  const canvas = canvasRef.value
  if (!canvas) return

  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  ctx = canvas.getContext('2d')

  // 创建花朵
  flowers = []
  const flowerCount = Math.floor((canvas.width * canvas.height) / 30000)
  for (let i = 0; i < flowerCount; i++) {
    flowers.push(new Flower(canvas))
  }

  // 创建蝴蝶
  butterflies = []
  for (let i = 0; i < 8; i++) {
    butterflies.push(new Butterfly(canvas))
  }

  animate()
}

const animate = () => {
  if (!ctx || !canvasRef.value) return

  // 创建天空渐变
  const gradient = ctx.createLinearGradient(0, 0, 0, canvasRef.value.height)
  gradient.addColorStop(0, '#87CEEB')
  gradient.addColorStop(0.5, '#B0E0E6')
  gradient.addColorStop(1, '#E0F6FF')
  
  ctx.fillStyle = gradient
  ctx.fillRect(0, 0, canvasRef.value.width, canvasRef.value.height)

  // 绘制草地
  const groundGradient = ctx.createLinearGradient(0, canvasRef.value.height * 0.6, 0, canvasRef.value.height)
  groundGradient.addColorStop(0, 'rgba(150, 220, 150, 0.3)')
  groundGradient.addColorStop(1, 'rgba(100, 200, 100, 0.5)')
  ctx.fillStyle = groundGradient
  ctx.fillRect(0, canvasRef.value.height * 0.6, canvasRef.value.width, canvasRef.value.height * 0.4)

  // 更新和绘制花朵
  flowers.forEach(flower => {
    flower.update()
    flower.draw(ctx)
  })

  // 更新和绘制蝴蝶
  butterflies.forEach(butterfly => {
    butterfly.update()
    butterfly.draw(ctx)
  })

  animationFrame = requestAnimationFrame(animate)
}

const handleResize = () => {
  if (!canvasRef.value) return
  canvasRef.value.width = window.innerWidth
  canvasRef.value.height = window.innerHeight
}

onMounted(() => {
  init()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (animationFrame) {
    cancelAnimationFrame(animationFrame)
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.butterfly-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}
</style>

